<template>
  <div>
    <query-table ref="sso_query_table" :page-size="20" :columns="columns"
                 :append-buttons="appendQueryButtons"
                 :query-fields="queryFields"
                 :table-max-height="tableMaxHeight"
                 base-url="/sso_app_info" v-loading="isLoading" :detail-fields="infoFields"
                 selectable show-index/>

    <el-dialog width="35%" :title="dialog =='edit'?'编辑': '创建'" v-loading="dlgLoading" :visible="dlgVisible"
               :close-on-click-modal="false" @close="dlgVisible = false">
      <div>
        <el-form :model="form"  label-width="auto" style="width:90%;" >
              <el-form-item label="应用ID" >
                <el-input v-model="form.id" :disabled="dialog =='edit'"></el-input>
              </el-form-item>
              <el-form-item label="名称:" prop="name">
                <el-input v-model="form.name"
                          placeholder="请输入应用名称" clearable />
              </el-form-item>
          <el-row>

            <el-col span="20">
              <el-form-item label="秘钥" prop="secret">
                <el-input v-model="this.form.secret" :disabled="dialog =='edit'"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="4" style="margin-top: 8px" v-if="dialog =='create'">
              <el-button size="small" type="success"
                         @click="idGen">生成</el-button>
            </el-col>
          </el-row>
          <el-form-item label="IP白名单:" prop="allowIps">
            <el-input v-model="form.allowIps"
                      placeholder="请输入IP白名单,多个IP用英文逗号隔开"  />
          </el-form-item>
          <el-form-item label="是否启用:" prop="disabled">
            <el-switch
                v-model="form.disabled"
                active-color="#ff4949"
                inactive-color="#13ce66">
            </el-switch>
          </el-form-item>
          <el-form-item label="备注:" prop="name">
            <el-input v-model="form.remark"
                      placeholder="请输入备注"  />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button type="primary" @click="save">保存</el-button>

        <el-button type="danger"  @click="()=>{
          this.dlgVisible = false;
        }">取消</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SsoManage",
  $$route:{
    meta:{
      title:'认证管理',
    }
  },
  props:{
    //页面高度
    pageHeight:{
      type:Number,
      default:500
    }
  },
  data() {
    return {
      dialog:'',
      dlgLoading: false,
      dlgVisible: false,
      form: {
        id: '',
        name: "",
        secret: '',
        allowIps: '',
        disabled: false,
        remark: ''
      },

      columns: [
        {id: 'id', name: '应用ID', width: 100,},
        {id: 'name', name: '应用名称', width: 200,},
        {id: 'secret', name: '秘钥',  width: 200},
        {id: 'allowIps', name: 'ip白名单', width: 200, showOverflowTooltip: true},
        {
          id: 'disabled', name: '当前状态', width: 130, showOverflowTooltip: true, formatter: (value) => {
            if (value === true) {
              return '关闭'
            }
            return '启用'
          }
        },
        {id: 'remark', name: '备注信息', width: 150, showOverflowTooltip: true},
        {
          id: 'createTime', name: '创建时间', width: 150, formatter: (value) => {
            if (value === null) {
              return ''
            }
            let dt = new Date(value)
            return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate();
          }
        },
        {id: 'createUser', name: '创建人', type: 'user', width: 100, showOverflowTooltip: true},
        {
          id: 'operation', name: '操作', type: 'button', width: 200, children: [
            {
              text: '编辑', click:(row)=>{
                this.dialog='edit';
                this.dlgVisible=true;
                this.form = row;
              }
            },
            {
              text: '删除', type: 'danger', operation: 'delete'
            },
          ]
        },
      ],
      queryFields: [
        {id: 'id', name: '应用ID', colSpan: 7},
        {id: 'name', name: '名称', colSpan: 6},
        {
          id: 'disabled',
          name: '状态',
          component: {id: 'data-select', data: [{id: false, name: '启用'}, {id: true, name: '关闭'}], hideRoot: true},
          colSpan: 6
        },

      ],
      appendQueryButtons: [
        {
          text: '新增', type: 'success', click: () => {
            this.dlgVisible = true;
            this.dialog='create';
            this.form={}
            this.form.secret = this.uuid()
          }
        },
      ],
      isLoading: false

    }
  },
  computed:{
    //表格最大高度，自适应
    tableMaxHeight(){
      return this.pageHeight - 100;
    }
  },
  methods: {

    save() {
      const loading = this.openLoading('正在处理...');
      // this.dlgLoading = true;
      if (this.dialog=='create') {
        this.$post("/sso_app_info/create",this.form,(res) =>{
          if (res.code == 0) {
            this.$message.success('创建成功');
            this.$refs['sso_query_table'].reload()
            this.dlgVisible = false;
          }
        },(hook)=>{
          loading.close();
        })
      }
      if (this.dialog=='edit') {
        this.$post("/sso_app_info/update",this.form,(res) =>{
          if (res.code == 0) {
            this.$message.success('修改成功');
            this.$refs['sso_query_table'].reload()
            this.dlgVisible = false;
          }

        },(hook)=>{
          loading.close();
        })
      }

    },
    uuid() {
      let temp_url = URL.createObjectURL(new Blob());
      let uuid = temp_url.toString();
      URL.revokeObjectURL(temp_url);
      let s = uuid.substr(uuid.lastIndexOf("/") + 1).toString();
      console.log(s)
      return s;
    },
    idGen() {
      this.form.secret = this.uuid()
      console.log('form',this.form)
      this.$forceUpdate()
    }

  }
}

</script>

<style scoped>

</style>